import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import GetDerivedStateFromPropsDemo from './GetDerivedStateFromPropsDemo';

// class GetSnapshotBeforeUpdateDemo extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       messages: [],//用于保存子div
//     }
//     this.rootNode = React.createRef();
//   }

//   handleMessage() {//用于增加msg
//     this.setState(pre => ({
//       messages: [`msg: ${pre.messages.length}`, ...pre.messages],
//     }))
//   }
//   componentDidMount() {

//     for (let i = 0; i < 20; i++) this.handleMessage();//初始化20条
//     this.timeID = window.setInterval(() => {//设置定时器
//       if (this.state.messages.length > 200) {//大于200条，终止
//         window.clearInterval(this.timeID);
//         return;
//       } else {
//         this.handleMessage();
//       }
//     }, 1000)
//   }
//   componentWillUnmount() {//清除定时器
//     window.clearInterval(this.timeID);
//   }
//   getSnapshotBeforeUpdate() {//很关键的，我们获取当前rootNode的scrollHeight，传到componentDidUpdate 的参数perScrollHeight
//     return this.rootNode.current.scrollHeight;
//   }
//   componentDidUpdate(perProps, perState, perScrollHeight) {
//     // 100   150
//     const curScrollTop = this.rootNode.current.scrollTop;
//     if (curScrollTop < 5) return;
//     this.rootNode.current.scrollTop = curScrollTop + (this.rootNode.current.scrollHeight - perScrollHeight);
//     //加上增加的div高度，就相当于不动
//   }
//   render() {

//     return (
//       <div className='wrap' ref={this.rootNode} >
//         { this.state.messages.map(msg => (
//           <div>{msg} </div>
//         ))}
//       </div>
//     );
//   }
// }


// ReactDOM.render(
//   <GetSnapshotBeforeUpdateDemo />,
//   document.getElementById("root"))



// class Demo extends React.Component {
//   state = {
//     type: 'A'
//   }

//   changeType = () => {
//     this.setState({
//       type: this.state.type === 'A' ? 'B' : 'A'
//     });
//   }

//   render() {
//     return <div>
//       <GetDerivedStateFromPropsDemo type={this.state.type} />
//       <button onClick={this.changeType}>切换type值</button>
//     </div>
//   }
// }

// ReactDOM.render(
//     <Demo />,
//     document.getElementById("root")
// )